<template>
	<div
		class="inline-flex items-center"
		:class="{
			'!text-success':
				trend === 'up' || [BettingResult.win, BettingResult.winHalf].includes(result),
			'!text-danger':
				trend === 'down' || [BettingResult.lose, BettingResult.loseHalf].includes(result)
		}">
		<div class="app-font-bold">{{ fmtOdds(value, at) }}</div>
		<base-icon v-if="trend" :name="trend === 'up' ? 'superior2' : 'down2'" />
	</div>
</template>

<script lang="ts" setup>
import { BaseIcon } from '@/components/base'
import { fmtOdds } from '@/utils'
import { PropType } from 'vue'
import { BettingResult } from '@/enums'
// import { TrendType } from '@/types'
defineProps({
	value: {
		type: [Number, String],
		default: ''
	},
	trend: {
		type: String
	},
	result: {
		type: String as PropType<BettingResult>,
		default: ''
	},
	at: {
		type: Boolean,
		default: false
	}
})
</script>
